<template>
  <div>
    <div class="filter">
      <label>筛选日志日期区间: </label>
      <div>
        <el-date-picker
          v-model="state.dateRange"
          type="daterange"
          unlink-panels
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="截止日期"
          :shortcuts="shortcuts"
        />
      </div>
      <div>
        <el-button type="primary" :icon="Search" @click="handleFilter"> 查询 </el-button>
        <el-button :icon="Refresh" @click="handleClear">重置</el-button>
      </div>
    </div>
    <x-table
      ref="refTable"
      name="定时任务日志"
      :top="47"
      :columns="columns"
      :init-sort="{ logId: 'descending' }"
      :data="tableData.resp.list"
      :total="tableData.resp.total"
      :loading="tableData.loading"
      @query="handleQuery"
    >
      <template #column-status="scope">
        <el-tag :type="`${scope.data === 0 ? 'danger' : 'success'}`">
          <span v-if="scope.data === 0">失败</span>
          <span v-if="scope.data === 1">成功</span>
        </el-tag>
      </template>
    </x-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElDatePicker, ElTag } from 'element-plus'
import { useRoute } from 'vue-router'
import { Search, Refresh } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { jobApi } from '@/api/modules/job/job'

const route = useRoute()

const refTable = ref()
const tableData = reactive({ resp: { list: [], total: 0 }, loading: false })
const handleQuery = (page: AxiosType.Pagination) => {
  tableData.loading = true
  const params = {} as any
  if (route.query.jobName) {
    params.jobName = route.query.jobName
  }
  if (state.dateRange[0]) {
    params.queryBeginTime = dayjs(state.dateRange[0]).format('YYYY-MM-DD') + ' 00:00:00'
  }
  if (state.dateRange[1]) {
    params.queryEndTime = dayjs(state.dateRange[1]).format('YYYY-MM-DD') + ' 23:59:59'
  }
  jobApi.findLogListPage(page, params).then(resp => {
    if (resp.success) {
      tableData.resp = resp.data
    }
    tableData.loading = false
  })
}
const status = [
  { text: '成功', value: 1 },
  { text: '失败', value: 0 }
]

const jobNameCol = { prop: 'jobName', width: 150, label: '任务名称', isGbk: true, sortable: false } as any
if (route.query.jobName) {
  jobNameCol.search = ''
}
const columns = [
  { ...jobNameCol },
  { prop: 'invokeTarget', width: 200, label: '调用目标', sortable: false },
  { prop: 'status', label: '状态', filters: status },
  { prop: 'runningTime', label: '耗时(毫秒)', search: '' },
  { prop: 'exceptionMessage', label: '异常信息', sortable: false },
  { prop: 'startTime', width: 160, label: '开始时间', search: '' },
  { prop: 'stopTime', width: 160, label: '完成时间', search: '' }
]

const shortcuts = [
  {
    text: '今天',
    value: () => {
      return [new Date(), new Date()]
    }
  },
  {
    text: '近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  }
]

const state = reactive({ dateRange: [] as any[] })
const handleFilter = () => {
  refTable.value.refresh()
}
const handleClear = () => {
  state.dateRange = ['', '']
  refTable.value.refresh()
}
</script>

<style lang="scss" scoped>
.filter {
  padding: 0 10px 15px 0;
  display: flex;
  align-items: center;
  label {
    font-weight: bold;
    color: $--color-text-secondary;
  }
  & > div,
  label {
    padding-right: 10px;
  }
}
</style>
